<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<%@ include file="Head.jsp" %>
<title>Content List</title>
</head>

<body>

<%-- Header --%>
<%@ include file="Header.jsp" %>

<h1>${header_title}</h1>

<c:if test="${not empty show_searchbar}">
  <form action="ContentList" method="get">
    <ul>
      <li><input type="text" name="search"/></li>
      <li>
        <select name="search_where">
          <option value="all">All</option>
          <option value="user">Username</option>
          <option value="content">Content</option>
          <option value="title">Title</option>
          <option value="tag">Tag</option>
        </select>
      </li>
      <li>
	      <c:forEach var="tag" items="${all_tags}">
	        <input type="checkbox" name="tag" value="${tag}"/>${tag}
	      </c:forEach>
	      <br/>
      </li>
      <li>
        <select name="sort">
			    <option value="time">Sort by Time</option>
			    <option value="like">Sort by Likes</option>
			    <option value="comment">Sort by Comments</option>
				</select>
      </li>
      <li><input type="submit" value="Search"/></li>
    </ul>
  </form>
</c:if>

<ul id="content_list">
<c:forEach var="content" items="${contents}">
  <li class="${content.parity}">
    <ul>
      <li>
        <a href="ShowContent?id=${content.id}" class="content_title">${content.title}</a>
      </li>
      <li>
        Tag: <span class=tag>${content.tag}</span>
      </li>
      <li>
        Posted by <a href="User?username=${content.user}">${content.user}</a>
      </li>
      <li>
        <script type="text/javascript">
          document.write(ParseTime(${content.timestamp}) + " ago");
        </script>
      </li>
      <li>
	      <c:choose>
	        <c:when test="${not empty sessionScope.username}">
            <button id="like_button${content.id}"
                    onclick="LikeClicked('${content.id}', '${sessionScope.username}')">Like</button>
            <button id="dislike_button${content.id}"
                    onclick="DislikeClicked('${content.id}', '${sessionScope.username}')">Dislike</button>
	        </c:when>
	        <c:otherwise>
	        </c:otherwise>
	      </c:choose>
	      
        <span id="like_count${content.id}"></span>/
        <span id="dislike_count${content.id}"></span>
        
        <script type="text/javascript">
          PutLikes("${content.id}", "${sessionScope.username}");
          PutDislikes("${content.id}", "${sessionScope.username}");
          
          setInterval('PutLikes("${content.id}", "${sessionScope.username}")', 5000);
          setInterval('PutDislikes("${content.id}", "${sessionScope.username}")', 5000);
        </script>
      </li>
      
      <li>
        Comments : <span id="comment_count${content.id}"></span>
        <script type="text/javascript">
          ShowNumberOfComments('${content.id}');
        </script>
      </li>
      
      <li class="content_body">
        ${content.content}
      </li>
      
      <c:if test="${not empty show_comments}">
      
      <script type="text/javascript">
			  setInterval("RefreshComments('${content.id}', '${sessionScope.username}')", 5000);
			</script>
      
	      <li>
	        <ul id="comment_list">
	        </ul>
	        <script type="text/javascript">
	          RefreshComments('${content.id}', '${sessionScope.username}');
	        </script>
	      </li>
	      
	      <c:if test="${not empty sessionScope.username}">
		      <li>
			      <form>
							<p>
								<textarea id='comment_input' rows="10" cols="100"></textarea>
								<br/>
								<input type='button'
								  onclick="AddComment('${content.id}', '${sessionScope.username}')"
								  value='Post Comment'/>
							</p>
						</form>
		      </li>
		    </c:if>
	      
      </c:if>
    </ul>
  </li>
</c:forEach>
</ul>

<c:if test="${not empty show_pagination}">
  <a href="${prev_page}">Previous Page</a>
  <a href="${next_page}">Next Page</a>
</c:if>

</body>

</html>

